<!-- 历史交易明细 -->
<script lang="ts" setup>
import { onMounted, ref, reactive, getCurrentInstance, toRefs } from "vue";
import {
  billDetails,
  getDetails,
  exportDetails,
} from "@/api/system/HistoricalTransactionDetails";
let accData = [
  {
    label: "中国工商银行股份有限公司呼和浩特如意西街支行(****5210)",
    value: "中国工商银行股份有限公司呼和浩特如意西街支行:0602008909100035210",
  },
  {
    label: "工商银行南京市城南支行(****3712)",
    value: "中国工商银行股份有限公司呼和浩特如意西街支行:4301012919100713712",
  },
  {
    label: "中国工商银行股份有限公司银川紫荆花支行(****4084)",
    value: "中国工商银行股份有限公司银川紫荆花支行:2902007709100004084",
  },
  {
    label: "中国工商银行股份有限公司青岛敦化路支行(****3802)",
    value: "中国工商银行股份有限公司青岛敦化路支行:3803232009000043802",
  },
  {
    label: "中国工商银行江北支行营业部(****0544)",
    value: "中国工商银行江北支行营业部:3901130019200080544",
  },
  {
    label: "中国工商银行股份有限公司武汉紫阳路支行(****4379)",
    value: "中国工商银行股份有限公司武汉紫阳路支行:3202005709200164379",
  },
  {
    label: "中国工商银行股份有限公司哈尔滨建成支行(****8050)",
    value: "中国工商银行股份有限公司哈尔滨建成支行:3500022509100008050",
  },
  {
    label: "中国工商银行阿克苏阿拉尔支行(****3441)",
    value: "中国工商银行阿克苏阿拉尔支行:3014000109100093441",
  },
  {
    label: "中国工商银行股份有限公司西安经济技术开发区支行(****2336)",
    value: "中国工商银行股份有限公司西安经济技术开发区支行:3700000619200332336",
  },
  {
    label: "中国工商银行股份有限公司无锡蠡园开发区支行(****9113)",
    value: "中国工商银行股份有限公司无锡蠡园开发区支行:1103023309200809113",
  },
  {
    label: "工商银行南京市海福巷支行(****2678)",
    value: "工商银行南京市海福巷支行:4301017209100142678",
  },
  {
    label: "工行石家庄西苑支行(****8955)",
    value: "工行石家庄西苑支行:0402022219300128955",
  },
  {
    label: "中国工商银行股份有限公司三亚东方支行(****5404)",
    value: "中国工商银行股份有限公司三亚东方支行:2201002509200275404",
  },
  {
    label: "中国工商银行股份有限公司石家庄光明支行(****6094)",
    value: "中国工商银行股份有限公司石家庄光明支行:0402023809300466094",
  },
  {
    label: "中国工商银行股份有限公司天津陈塘庄支行(****0147)",
    value: "中国工商银行股份有限公司天津陈塘庄支行:0302060419300280147",
  },
  {
    label: "中国工商银行昆明花园支行(****1401)",
    value: "中国工商银行昆明花园支行:2502124119024521401",
  },
  {
    label: "中国工商银行股份有限公司成都航空路支行(****4234)",
    value: "中国工商银行股份有限公司成都航空路支行:4402235219000014234",
  },
  {
    label: "中国工商银行股份有限公司深圳高新园北区支行(****5451)",
    value: "中国工商银行股份有限公司深圳高新园北区支行:4000093419100445451",
  },
  {
    label: "中国工商银行股份有限公司广西自贸试验区南宁片区五象支行(****0960)",
    value:
      "中国工商银行股份有限公司广西自贸试验区南宁片区五象支行:2102116009300330960",
  },
  {
    label: "中国工商银行福州市五四支行(****4218)",
    value: "中国工商银行福州市五四支行:1402020329006954218",
  },
  {
    label: "中国工商银行股份有限公司扬州汶河支行(****7233)",
    value: "中国工商银行股份有限公司扬州汶河支行:1108020909100257233",
  },
  {
    label: "中国工商银行股份有限公司重庆两江分行(****9271)",
    value: "中国工商银行股份有限公司重庆两江分行:3100020219200339271",
  },
  {
    label: "中国工商银行股份有限公司成都航空路支行(****9190)",
    value: "中国工商银行股份有限公司成都航空路支行:4402235209100069190",
  },
  {
    label: "中国工商银行股份有限公司长春绿园支行(****5139)",
    value: "中国工商银行股份有限公司长春绿园支行:4200224109200165139",
  },
  {
    label: "中国工商银行股份有限公司成都高新支行(****8175)",
    value: "中国工商银行股份有限公司成都高新支行:4402239009000008175",
  },
  {
    label: "中国工商银行股份有限公司长沙汇通支行(****1951)",
    value: "中国工商银行股份有限公司长沙汇通支行:1901024009201121951",
  },
  {
    label: "中国工商银行股份有限公司沈阳南站支行(****4108)",
    value: "中国工商银行股份有限公司沈阳南站支行:3301002009200134108",
  },
  {
    label: "工行合肥黄山路支行(****0024)",
    value: "工行合肥黄山路支行:1302222409200340024",
  },
  {
    label: "工行太原长风街支行(****8983)",
    value: "工行太原长风街支行:0502126709200038983",
  },
  {
    label: "中国工商银行股份有限公司上海市陆家嘴支行(****5101)",
    value: "中国工商银行股份有限公司上海市陆家嘴支行:1001182609000375101",
  },

  {
    label: "中国工商银行福州市五四支行(****1993)",
    value: "中国工商银行福州市五四支行:1402020309006951993",
  },
  {
    label: "工行广州环市中支行(****5646)",
    value: "工行广州环市中支行:3602073929200085646",
  },
  {
    label: "中国工商股份有限公司西宁文景路支行(****9156)",
    value: "中国工商股份有限公司西宁文景路支行:2806002309000079156",
  },
  {
    label: "中国工商银行股份有限公司天津南北大街支行(****8571)",
    value: "中国工商银行股份有限公司天津南北大街支行:0302013709100058571",
  },
  {
    label: "中国工商银行股份有限公司雁一支行(****6651)",
    value: "中国工商银行股份有限公司雁一支行:2703888509000036651",
  },
  {
    label: "中国工商银行股份有限公司郑州金水支行(****5991)",
    value: "中国工商银行股份有限公司郑州金水支行:1702020709200335991",
  },
  {
    label: "中国工商银行股份有限公司南昌沿江支行(****5078)",
    value: "中国工商银行股份有限公司南昌沿江支行:1502200119300225078",
  },
  {
    label: "中国工商银行股份有限公司南湖北路支行(****7504)",
    value: "中国工商银行股份有限公司南湖北路支行:3002012819100057504",
  },
  {
    label: "工商银行贵阳文化路支行(****7157)",
    value: "工商银行贵阳文化路支行:2402013619200057157",
  },
  {
    label: "工商银行南京市城南支行(****8356)",
    value: "工商银行南京市城南支行:4301012919100698356",
  },
  {
    label: "中国银行股份有限公司北京皂君庙支行(****8294)",
    value: "中国银行股份有限公司北京皂君庙支行:349356028294",
  },
  {
    label: "中国银行南昌市红谷滩支行营业部(****9453)",
    value: "中国银行南昌市红谷滩支行营业部:197744949453",
  },
  {
    label: "中国银行贵阳市金元国际新城支行(****2003)",
    value: "中国银行贵阳市金元国际新城支行:133028872003",
  },
  {
    label: "中国银行宁波市江北支行营业部(****1076)",
    value: "中国银行宁波市江北支行营业部:394878441076",
  },
  {
    label: "中国银行股份有限公司乌鲁木齐市南湖北路支行(****2454)",
    value: "中国银行股份有限公司乌鲁木齐市南湖北路支行:107100142454",
  },
];
let headers = [
  { title: "交易类型", sortable: false, key: "drcrfh" },
  { title: "付款单位", sortable: false, key: "name" },
  { title: "付款账号", sortable: false, key: "accNo" },
  { title: "付款银行", sortable: false, key: "bkName" },
  { title: "交易金额", sortable: false, key: "Amount" },
  { title: "收款单位", sortable: false, key: "recipName" },
  { title: "收款账号", sortable: false, key: "recipAccNo" },
  { title: "收款银行", sortable: false, key: "recipBkName" },
  { title: "交易时间", sortable: false, key: "transactionTime" },
  { title: "摘要", sortable: false, key: "summary" },
  { title: "交易附言", sortable: false, key: "postScript" },
  { title: "币种", sortable: false, key: "currType" },
  { title: "交易后余额", sortable: false, key: "balance" },
  { title: "银行流水", sortable: false, key: "onlySequence" },
  { title: "用途信息", sortable: false, key: "useOf" },
  // { title: "操作", key: "actions", sortable: false },
];
let paymentAmountArr = ref(["", ""]);
let dateRangeTime = ref("");
let transactionTypeVal = ref("请选择交易类型");
let transactionTypeItems = ["收款", "付款"];
let isDialogVisible = ref(false);
let Datas = ref([]);

const { proxy } = getCurrentInstance();
const loading = ref(true);
const total = ref(0);
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    recipAccNo: null,
    drcrf: null,
    name: "",
    accNo: "",
  },
  params: {
    endTime: undefined,
    Amount: undefined,
  },
});
const { queryParams } = toRefs(data);
/** 查询列表 */
const getList = async () => {
  loading.value = true;
  const res = await billDetails(queryParams.value);
  Datas.value = res.rows;
  Datas.value.forEach((item) => {
    switch (item.drcrf) {
      case 1:
        item.drcrfh = "付款";
        item.Amount = item.debitAmount;
        break;
      case 2:
        item.drcrfh = "收款";
        item.Amount = item.creditAmount;
        break;
    }
  });
  total.value = res.total;
  loading.value = false;
};
const getGetDetails = async (item) => {
  let res = await getDetails(item.id);
};
/** 搜索按钮操作 */
const handleQuery = () => {
  console.log(queryParams.value,'queryParams.value');
  proxy?.addDateRange(
    queryParams.value,
    dateRangeTime.value,
    "TransactionTime"
  );
  proxy?.addDateRange(queryParams.value, paymentAmountArr.value, "Amount");
  switch (transactionTypeVal.value) {
    case "付款":
      queryParams.value.drcrf = 1;
      break;
    case "收款":
      queryParams.value.drcrf = 2;
      break;
    case "请选择交易类型":
      queryParams.value.drcrf = null;
      break;
  }
  getList();
};
const Resetting = () => {
  queryParams.value = {
    pageNum: 1,
    pageSize: 10,
    recipAccNo: null,
    drcrf: null,
    name: "",
    accNo: "",
  };
  paymentAmountArr.value = ["", ""];
  dateRangeTime.value = "";
  transactionTypeVal.value = "请选择交易类型";
  getList();
};
//分页器操作
const handleSizeChange = (e) => {
  queryParams.value.pageSize = e;
  getList();
};
const handleCurrentChange = (w) => {
  getList();
};
const exportItem = (item) => {};
onMounted(() => {
  getList();
});
</script>

<template>
  <VCard>
    <VCardText class="py-10">
      <VRow class="match-height">
        <VCol cols="12" md="3">
          <AppTextField
            v-model="queryParams.recipAccNo"
            label="收款账号"
            placeholder="请输入开户账号"
            density="compact"
          />
          <!-- <AppSelect
            :items="accData"
            item-title="label"
            item-value="value"
            v-model="queryParams.account"
            label="开户账号"
            placeholder="请选择项开户账号"
            density="compact"
          /> -->
        </VCol>

        <VCol cols="12" md="3">
          <AppSelect
            :items="transactionTypeItems"
            v-model="transactionTypeVal"
            label="交易类型"
            placeholder="请选择交易类型"
            density="compact"
          />
        </VCol>

        <VCol cols="12" md="3">
          <VRow class="match-height">
            <VCol cols="12" md="5">
              <AppTextField
                v-model="paymentAmountArr[0]"
                label="交易金额区间"
                placeholder="请输入金额"
                type="number"
                density="compact"
              />
            </VCol>

            <div class="display_flex-end" style="padding-bottom: 15px">～</div>

            <VCol cols="12" md="5">
              <AppTextField
                v-model="paymentAmountArr[1]"
                label=" "
                placeholder="请输入金额"
                type="number"
                density="compact"
              />
            </VCol>
          </VRow>
        </VCol>

        <VCol cols="12" md="3">
          <div class="block">
            <div>
              <span class="demonstration">交易时间区间</span>
            </div>
            <el-date-picker
              style="
                background-color: rgb(var(--v-theme-surface));
                inline-size: 100%;
              "
              v-model="dateRangeTime"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="YYYY-MM-DD"
            >
            </el-date-picker>
          </div>
        </VCol>

        <VCol cols="12" md="3">
          <AppTextField
            v-model="queryParams.name"
            label="付款单位"
            placeholder="请输入付款单位"
            density="compact"
          />
        </VCol>
        <VCol cols="12" md="3">
          <AppTextField
            v-model="queryParams.accNo"
            label="付款账号"
            placeholder="请输入付款账号"
            density="compact"
          />
        </VCol>

        <VCol cols="12" md="2" class="display_flex-end">
          <VBtn color="primary" density="compact" @click="handleQuery">
            查询
          </VBtn>

          <VBtn variant="outlined" density="compact" @click="Resetting">
            重置
          </VBtn>
        </VCol>

        <VCol cols="12" md="12" class="myTableCss">
          <VDataTable
            :headers="headers"
            :items="Datas"
            :items-per-page="10"
            class="text-no-wrap"
          />
            <!-- <template #item.actions="{ item }">
              <div class="d-flex gap-1 position_a">
                <IconBtn @click="getGetDetails(item)">
                  <VIcon>
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      class="icon icon-tabler icon-tabler-eye"
                      width="20"
                      height="20"
                      viewBox="0 0 24 24"
                      stroke-width="1.5"
                      stroke="rgb(var(--v-theme-primary))"
                      fill="none"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    >
                      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                      <path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
                      <path
                        d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6"
                      />
                    </svg>
                  </VIcon>
                </IconBtn>
                <IconBtn @click="exportItem(item)">
                  <VIcon>
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      class="icon icon-tabler icon-tabler-download"
                      width="20"
                      height="20"
                      viewBox="0 0 24 24"
                      stroke-width="1.5"
                      stroke="rgb(var(--v-theme-primary))"
                      fill="none"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    >
                      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                      <path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2" />
                      <path d="M7 11l5 5l5 -5" />
                      <path d="M12 4l0 12" />
                    </svg>
                  </VIcon>
                </IconBtn>
              </div>
            </template>
          </VDataTable> -->
          <div class="mypagination">
            <el-pagination
              v-model:current-page="queryParams.pageNum"
              v-model:page-size="queryParams.pageSize"
              :page-sizes="[10, 25, 50, 100]"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </VCol>

        <VDialog v-model="isDialogVisible" width="500">
          <DialogCloseBtn @click="isDialogVisible = !isDialogVisible" />
          <VCard title="查看">
            <VCardText> </VCardText>
          </VCard>
        </VDialog>
      </VRow>
    </VCardText>
  </VCard>
</template>

<style lang="scss">
@use "@core/scss/template/libs/apex-chart.scss";

.display_flex-end {
  display: flex;
  align-items: flex-end;
  gap: 15px;
}

.mb-1 {
  margin-bottom: 0px !important;
}

.el-picker-panel {
  background-color: rgb(var(--v-theme-surface)) !important;
}

.el-date-editor .el-input__inner {
  background-color: rgb(var(--v-theme-surface));
  font-size: 13px !important;
}

.el-input__prefix {
  display: none;
  background-color: rgb(var(--v-theme-surface));
}

.el-input__wrapper {
  padding-block: 0;
  padding-inline: 2px;
}

.demonstration {
  color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
  font-size: 13px;
}
</style>
